<template>
  <div class="goodsCategory">
    <Breadcrumb name1="商品管理" name2="商品分类"></Breadcrumb>
    <el-card>
      <div class="left">
        <h2>添加分类</h2>
        <el-form
          label-width="100px"
          :model="ruleForm"
          :rules="rules"
          ref="refForm"
          class="demo-ruleForm"
        >
          <el-form-item label="分类名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="商品类型" prop="type">
            <el-cascader
              :options="type"
              v-model="ruleForm.type"
              clearable
            ></el-cascader>
          </el-form-item>
          <el-form-item label="LOGO图片" prop="logo">
            <el-input v-model="ruleForm.logo"> </el-input>
          </el-form-item>
          <el-form-item label="ICON图标" prop="icon">
            <el-input v-model="ruleForm.icon"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('refForm')"
              >立即添加</el-button
            >
            <el-button @click="resetForm('refForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <h2>查看分类</h2>
        <el-tree
          :data="data"
          :props="defaultProps"
          accordion
          @node-click="handleNodeClick"
        >
        </el-tree>
      </div>
    </el-card>
  </div>
</template>
<script>
import Breadcrumb from '@/components/breadcrumb'
import { getCategory } from '@/api'
import { Message } from 'element-ui'
export default {
  data() {
    return {
      data: [],
      type: [],
      defaultProps: {
        children: 'children',
        label: 'gname',
      },
      ruleForm: {
        name: '',
        type: '',
        logo: '',
        icon: '',
      },
      rules: {
        name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
        type: [{ required: true, message: '请选择商品类型', trigger: 'blur' }],
        logo: [{ required: true, message: '请输入LOGO图片', trigger: 'blur' }],
        icon: [{ required: true, message: '请输入ICON图标', trigger: 'blur' }],
      },
    }
  },
  created() {
    this.getCategory()
  },
  components: {
    Breadcrumb,
  },
  methods: {
    async getCategory() {
      const { data: res } = await getCategory()
      this.type = this.data = res.data
      this.type.forEach((item) => {
        item.label = item.gname
        item.value = item.gid
        if (item.children.length > 0) {
          item.children.forEach((child) => {
            child.label = child.gname
            child.value = child.bid
          })
        }
      })
    },
    handleNodeClick(data) {
      console.log(data)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          Message({
            message: '添加未成功,接口正在开发中...',
            type: 'waring',
            duration: 1500,
          })
        } else {
          Message({
            message: '请填写完整信息',
            type: 'error',
            duration: 1500,
          })
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.goodsCategory {
  .el-card {
    width: 100%;
    .left,
    .right {
      width: 45%;
      h2 {
        margin-bottom: 20px;
        text-align: center;
      }
    }
  }
  ::v-deep .el-card__body {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  ::v-deep .el-tree-node__label {
    font-size: 16px;
    color: #333;
    padding: 0px 10px;
    cursor: pointer;
  }
}
</style>
